<template>
    <ul v-if="Object.keys(data).length" class="search-menu">
        <li :key="'grouplist' + key"  class="group-list" v-for="(val, key) in data">
            <div class="group-title">
                {{key}}
                <i v-if="val.length > 5" class="fif fif-angle-down text-info collapse-btn" style="cursor: pointer; font-size: 18px;"
                   data-toggle="collapse" :data-target="'#' + key" @click="collapse"></i>
            </div>
            <ul class="search-sub-menu">
                <li :key="'item' + index"  class="list" v-for="(item, index) in val.splice(0, 5)" @click="select(item)">{{item.title}}</li>
                <ul v-if="val.length > 5" :id="key" class="search-sub-menu collapse collapse-body">
                    <li :key="'list' + index"  class="list" v-for="(item, index) in val.splice(5)" @click="select(item)">{{item.title}}</li>
                </ul>
            </ul>
        </li>
    </ul>
    <div v-else class="no-result">
        No Results
    </div>
</template>

<script>
    export default {
        name: "SearchList",
        props: {
            data: {
                type: Object,
                default: () => {
                }
            }
        },
        created() {
        },
        mounted() {
        },
        methods: {
            select(item) {
                this.$emit('select', item)
            },
            collapse(e) {
                let target = $(e.target)
                let menuDOM = target.parent().next().find('.collapse')
                if (menuDOM.hasClass('in')) {
                    target.removeClass('fif-angle-up')
                    target.addClass('fif-angle-down')
                } else {
                    target.removeClass('fif-angle-down')
                    target.addClass('fif-angle-up')

                }
            }
        }
    }
</script>

<style lang="stylus" scoped>
    .no-result
        background-color: #fff;
        border: 1px solid #ddd;
        padding: 10px;

    .search-menu
        background-color: #fff;
        list-style: none;
        padding 0;
        margin 0;
        border: 1px solid #ddd;
        max-height: 400px;
        overflow-y: auto;
        .group-title
            padding: 10px;
            padding-bottom: 0;
            font-weight: bold;
        .search-sub-menu
            list-style: none;
            padding 0;
            margin 0;
            .list
                padding: 8px 10px;
                cursor: pointer;
                font-size: 14px;
                &:hover
                    background-color: #1e88e5
                    color: #fff;
</style>